var carlist = [
    {id:12345,status:false,pic:'https://img14.360buyimg.com/n7/jfs/t1/187574/10/32552/165003/63da381fFda8cbd11/ec8e72f7e9b270d8.jpg',name:'迪奥',price:399,number:3,total:16},
    {id:67890,status:false,pic:'https://img10.360buyimg.com/n7/jfs/t1/181580/24/32020/498332/63dd52a1F33f08965/e5050a241a9ed3c7.png',name:'爱马仕',price:301234,number:1,total:5},
    {id:99123,status:false,pic:'https://img12.360buyimg.com/n7/jfs/t1/87528/13/36177/69070/63dccbeeFdd2b5b16/ead6aaad9c75813f.jpg',name:'skII',price:1500,number:1,total:20},
]

// 

var newCarlist = JSON.parse(window.localStorage.getItem('carlist')) || [
    {id:12345,status:false,pic:'https://img14.360buyimg.com/n7/jfs/t1/187574/10/32552/165003/63da381fFda8cbd11/ec8e72f7e9b270d8.jpg',name:'迪奥',price:399,number:3,total:16},
    {id:67890,status:false,pic:'https://img10.360buyimg.com/n7/jfs/t1/181580/24/32020/498332/63dd52a1F33f08965/e5050a241a9ed3c7.png',name:'爱马仕',price:301234,number:1,total:5},
    {id:99123,status:false,pic:'https://img12.360buyimg.com/n7/jfs/t1/87528/13/36177/69070/63dccbeeFdd2b5b16/ead6aaad9c75813f.jpg',name:'skII',price:1500,number:1,total:20},
];

var contentbox = document.querySelector('.content');


function bindHTML(){
    console.log(newCarlist);
    // console.log(JSON.parse(window.localStorage.getItem('carlist')));
    // 提前把 总件数  多少个被选中的 总价 
    var totalSelect=0,totalNumber=0,totalPrice = 0;
    //加载数据
    carlist.forEach(function(item){
        if(item.status){
            totalNumber += item.number;
            totalPrice += item.number * item.price;
            totalSelect++;
        }
    });
        //组装字符串 

    var str = `
        <div class="top">
            <input type="checkbox" ${totalSelect == newCarlist.length?'checked':''}> 全选
            </div>
        <ul>
        `;

    newCarlist.forEach(function(item){
            str +=`
            <li>
            <div class="status">
              <input type="checkbox" data-id="${item.id}" ${item.status?'checked':''}>
            </div>
            <div class="show">
              <img src="${item.pic}" alt="">
            </div>
            <div class="title">
                ${item.name}
            </div>
            <div class="price">
              ￥ ${item.price.toFixed(2)}
            </div>
            <div class="number">
              <button data-id="${item.id}">-</button>
              <input type="text" value="${item.number}">
              <button data-id="${item.id}">+</button>
            </div>
            <div class="sub">
              ￥ ${(item.price * item.number).toFixed(2)}
            </div>
            <div class="destory">
              <button>删除</button>
            </div>
          </li>
            `
    })
    // alert(totalNumber)
    str += ` </ul>
        <div class="bottom">
          <div class="totalNum">
            总件数 : ${totalNumber}
          </div>
          <div class="btns">
            <button>清空购物车</button>
            <button ${totalSelect==0?'disabled':''}>去结算</button>
            <button ${totalSelect==0?'disabled':''}>删除所有已选中</button>
          </div>
          <div class="totalPrice">
            总价格 : ￥ <span>${totalPrice.toFixed(2)}</span>
          </div>
        </div>`
    // console.log(contentbox);

    contentbox.innerHTML = str
    // 用户如果修改了数据 更新到localStorage中
    window.localStorage.setItem('carlist',JSON.stringify(carlist));
}

bindHTML();